<template>
  <div class="subpage">
   <!-- <div class="banner"></div>-->
    <div style="width: 100%; min-height: 90px">
      <div class="nav-content">
        <div class="subject">
          <div id="nav">
            <a @click="selectSubject(null)" :class="selectId === 0 ? 'on' : ''">全部</a>
            <a v-for="subject in studentSubjectList"
              :key="subject.id"
              :class="subject.id === selectId ? 'on' : ''"
              @click="selectSubject(subject)" >{{subject.name}}</a>
          </div>
        </div>
      </div>
    </div>
    <el-divider content-position="left"></el-divider>
    <div class="subbox">
      <ul class="clearfix" >
        <li class="typeitem" v-for="course in courseList">
          <img @click="studyCourse(course)" :src="fileHost + course.head_img" class="image">
          <p class="title">{{course.name}}</p>
          <p class="course_detail">{{course.describe}}</p>
          <div style="margin-top: 5px;line-height:35px;">
            <i class="el-icon-user-solid">{{course.study_number}}人练习过</i>
            <el-button style="float: right" icon="el-icon-star-off" type="text">收藏</el-button>
          </div>
        </li>
      </ul>
      <div class="page">
        <el-pagination
          @current-change="changeCoursePage"
          background
          :hide-on-single-page="true"
          :current-page="currentPage"
          :page-size="pageSize"
          layout="prev, pager, next, jumper"
          :total="totalCount">
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'course',
    data () {
      return {
        subjectId: '',
        currentPage: 1,
        pageSize: 20,
        totalCount: 0,
        courseList: [],
        modeType: '',
        selectId: 0,
        fileHost: this.$store.state.fileHost,
        studentSubjectList: []
      }
    },

    created () {

    },

    mounted () {
      this.getStudentSubjectList()
      this.getCourseBySubjectId() // 获取课程列表
    },

    methods: {

      changeCoursePage (val) {
        this.currentPage = val
        this.getCourseBySubjectId()
      },

      getCourseBySubjectId () {
        this.axios.get(this.$httpApi.httpUrl('/student/course/getCourseList'), {
          params: {
            subjectId: this.subjectId,
            offset: (this.currentPage - 1) * this.pageSize,
            limit: this.pageSize
          }
        }).then(response => {
          this.courseList = response.data.data.dataList
          this.totalCount = response.data.data.total
        })
      },

      studyCourse (course) {
        let courseOrPaperInfo = {
          courseId: course.id,
          name: course.name,
          paperId: '',
          examId: ''
        }
        this.$store.commit('updateCourseOrPaperInfo', courseOrPaperInfo)
        this.$router.push({
          name: 'courseDetail',
        })
      },

      selectSubject (subject) {
          if (subject) {
              this.selectId = subject.id
              this.subjectId = subject.id
          } else {
              this.selectId = 0
              this.subjectId = ''
          }
          this.getCourseBySubjectId()
      },

      // 获取学员学习科目
      getStudentSubjectList () {
          this.axios.get(this.$httpApi.httpUrl('/student/subject/getSubjectByGradeType')).then(response => {
              this.studentSubjectList = response.data.data
          })
      },

      goView (val) {
        this.$router.push({
          name: 'courseList',
          query: {
            subjectId: val.id
          }
        })
      },
    }
  }
</script>
<style lang='scss' scoped>
  .el-divider--horizontal {
    height: 1px;
    margin: 0;
  }

  .subpage {
    background: #f8fafc;
    .banner {
      width: 100%;
      height: 360px;
      background: url('/static/image/bannerpic.png') no-repeat;
      background-size: 100% 100%;
      background-position: center;
    }
  }

  .nav-content {
    width: 1200px;
    min-height: 40px;
    margin: 20px auto;
    background: #f8fafc;
    position: relative;
    top: 10%;
  }

  .nav-content a {
    font-size: 15px;
    line-height: 40px;
    min-width: 60px;
    padding: 0 15px;
    margin-top: 10px;
    margin-right: 25px;
    float: left;
  }

  .nav-content a:hover {
    cursor: pointer;
    background: rgba(204,136,0,.1);
    color: #c80;
  }

  .course-content {
    width: 1200px;
    min-height: 500px;
    background: blue;
    margin: 20px auto;
  }

  .nav-content .on {
    background: rgba(204,136,0,.1);
    color: #c80;
  }

  .course_detail {
    padding-top: 6px;
    max-height: 48px;
    line-height: 20px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 14px;
    color: #93999f
  }

  .subbox ul {
    width: 100%;
    box-sizing: border-box;
    padding: 10px;
  }
  .subbox{
    width: 1200px;
    min-width: 500px;
    margin: 10px auto;
    position: relative;
    box-sizing: border-box;
    .page {
      position: relative;
      left: 0;
      bottom: 10px;
      width: 100%;
      text-align: center;
    }
  }

  .typeitem .title {
    padding-top: 8px;
    font-weight: bold
  }

  .subbox .typeitem .title:hover {
    color: red;
    cursor: pointer;
  }
  .subbox li {
    box-sizing: border-box;
    width: 192px;
    min-height: 160px;
    float: left;
    margin-right: 40px;
    margin-bottom: 30px;
    text-align: left;
    img{
      cursor: pointer;
      width: 100%;
      height:108px;
      display: block;
      border-radius: 8px;
      &:hover{
        opacity: 0.7;
        .course_title{
          color:#ca0000;
        }
      }
    }
    .course_title{line-height: 36px;font-weight: 500;color:#000000;font-size: 18px;
      padding: 0 5px;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box; // 作为弹性伸缩盒子模型显示。
      -webkit-box-orient: vertical; // 设置伸缩盒子的子元素排列方式--从上到下垂直排列
      -webkit-line-clamp: 2; // 显示的行
    }
  }


</style>
